<template>
  <div class="dialogBox">
    <el-dialog
      v-model="props.dialogVisible"
      :title="title"
      width="600px"
      :before-close="closeDialog"
    >
      <el-form ref="ruleFormRef" :rules="rules" :model="form1" label-width="140px" size="default">
        <div class="form-input-box2">
          <el-form-item label="单元雨量站Excel文件" prop="file1">
            <el-input v-model="form1.file1" />
          </el-form-item>
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo left-spacing"
            action=""
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"
          >
            <el-button type="primary">上传文件</el-button>
          </el-upload>
        </div>
      </el-form>
      <div class="desc">
        <el-button type="text">下载导入Excel模板</el-button>
        <h4>温馨提示：按模版格式可以导入多个单元的雨量站</h4>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="registerBtn"> 确定 </el-button>
          <el-button @click="closeDialog()">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
const rules = {
  file1: [{ required: true, message: '请上传预报断面SHP文件', trigger: 'blur' }]
}
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  }
})
const title = ref('单元雨量站导入')
const form1 = reactive({
  file1: ''
})
const ruleFormRef = ref(null)
const emit = defineEmits(['closeDialog'])
const closeDialog = () => {
  emit('closeDialog', false)
}
const registerBtn = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      closeDialog()
    } else {
      return
    }
  })
}
</script>

<style lang="less" scoped>
.dialogBox {
  .form-input-box2 {
    display: flex;
    :deep(.el-form-item--default .el-form-item__label) {
      font-size: 16px;
    }
    :deep(.el-form-item) {
      width: 100%;
    }
    .set-other-btn {
      border: solid 1px rgb(21, 13, 237);
      background-color: rgb(21, 13, 237);
    }
  }
  .desc {
    font-size: 16px;
    line-height: 26px;
    text-indent: 2em;
    h4 {
      font-size: 18px;
    }
  }
}
</style>
